/* 调整记录详情
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\QuotaManage\QuotaAdjust\component\RecordDetails.tsx
 * @Date: 2021-09-27 15:30:46
 * @LastEditTime: 2021-10-20 11:40:36
 */
import React from 'react'
import { http, IUdFormItem, UdForm } from '@/lib'
import { Select, Spin, Input } from 'antd'
import quotaApis from '@/apis/AboutQuota'
import ProcessList from '@/components/ProcessList/index'
import { WithToolbar } from '@/components/PhotoView'
const { Option } = Select
const { TextArea } = Input
export default class RecordDetails extends React.Component<any> {
  private labelCol: any = { span: 5 }
  private form: any
  private MODIFY_TYPE_ENUM: any = { UP: '调增', DOWN: '调减', ADJUST: '调剂', READJUST: '客户间调整', ADD: '导入' }
  private PLAN_TYPE_ENUM: any = {
    0: '计划内',
    1: '计划外',
  }
  private READJUST_ITEMS: IUdFormItem[] = [
    { id: 'belongAreaName', label: '调入方片区', render: <Input readOnly /> },
    { id: 'dealerNameRe', label: '调入方客户', render: <Input readOnly /> },
    { id: 'modifyBeforeQuota', label: '调入方调整前考核阶段剩余配额', render: <Input readOnly /> },
    { id: 'modifyAfterQuota', label: '调入方调整后考核阶段剩余配额', render: <Input readOnly /> },
    { id: 'belongAreaNameIn', label: '调出方片区', render: <Input readOnly /> },
    { id: 'dealerNameIn', label: '调出方客户', render: <Input readOnly /> },
    { id: 'modifyBeforeQuotaIn', label: '调出方调整前考核阶段剩余配额', render: <Input readOnly /> },
    { id: 'modifyAfterQuotaIn', label: '调出方调整后考核阶段剩余配额', render: <Input readOnly /> },
  ]
  private UPORDOWN_ITEMS: any = [
    { id: 'modifyBeforeQuota', label: '调整前考核阶段剩余配额', render: <Input readOnly /> },
    { id: 'modifyAfterQuota', label: '调整后考核阶段剩余配额', render: <Input readOnly /> },
  ]
  private ADJUST_ITEMS: any = [
    { id: 'modifyBeforeQuota', label: '调整前考核阶段剩余配额', render: <Input readOnly /> },
    { id: 'modifyAfterQuota', label: '调整后考核阶段剩余配额', render: <Input readOnly /> },
    { id: 'modifyBeforeQuotaSum', label: '调整前年度剩余配额', render: <Input readOnly /> },
    { id: 'modifyAfterQuotaSum', label: '调整后年度剩余配额', render: <Input readOnly /> },
  ]
  state = {
    loading: false,
    recordDetail: { modifyType: null },
  }
  render() {
    const {
      recordDetail: { modifyType },
    } = this.state
    let extendItems = []
    if (modifyType === 'READJUST') {
      extendItems = this.READJUST_ITEMS
    } else if (modifyType === 'ADJUST') {
      extendItems = this.ADJUST_ITEMS
    } else {
      extendItems = this.UPORDOWN_ITEMS
    }
    let items: IUdFormItem[] = [
      { id: 'brandName', label: '品牌公司', render: <Input readOnly /> },
      { id: 'prodBarname', label: '配额品项', render: <Input readOnly /> },
      { id: 'stageYear', label: '考核年度', render: <Input readOnly /> },
      { id: 'stageName', label: '考核阶段', render: <Input readOnly /> },
      { id: 'term', label: '配额有效期', render: <Input readOnly /> },
      { id: 'dealerName', label: '客户名称', render: <Input readOnly /> },
      { id: 'planTypeText', label: '计划类型', render: <Input readOnly /> },
      { id: 'modifyTypeText', label: '调整类型', render: <Input readOnly /> },
      ...extendItems,
      { id: 'modifyQuota', label: '调整数量', render: <Input readOnly /> },
      { id: 'remark', label: '备注信息', render: <TextArea rows={3} readOnly /> },
      {
        id: 'file',
        label: '附件',
        render: (
          <>
            <WithToolbar
              imagesList={this.state?.recordDetail?.['quotaApplyDetailFileRespVoList'] || []}
              type="processList"
            />
          </>
        ),
      },
    ]
    return (
      <>
        <div className="ant-modal-title">申请信息</div>
        <Spin spinning={this.state.loading}>
          <UdForm
            key={Date.now()}
            values={this.state.recordDetail}
            labelCol={this.labelCol}
            getForm={form => (this.form = form)}
            items={items}
          />
        </Spin>
        <ProcessList record={this.state.recordDetail} />
      </>
    )
  }

  componentDidMount() {
    let { record } = this.props
    this.getDispatchHistoryById(record.id)
  }

  private getDispatchHistoryById = (id: number | string) => {
    this.setState({ loading: true }, () => {
      http
        .get(quotaApis.getDispatchHistoryById, { params: { id } })
        .then(res => {
          let { data: recordDetail } = res
          recordDetail.term =
            recordDetail.quotaBeginTime && recordDetail.quotaEndTime
              ? `${recordDetail.quotaBeginTime}-${recordDetail.quotaEndTime}`
              : ''
          recordDetail.modifyTypeText = this.MODIFY_TYPE_ENUM[recordDetail.modifyType]
          recordDetail.dealerNameRe = recordDetail.dealerName
          recordDetail.planTypeText = this.PLAN_TYPE_ENUM[recordDetail.planType]
          this.setState({ recordDetail })
        })
        .finally(() => {
          this.setState({ loading: false })
        })
    })
  }
}
